<template>
<view>
<!--components/selectCity/selectCity.wxml-->
<scroll-view class="cityList" scroll-y :scroll-into-view="currentIndex" :scroll-top="scrollTop">
     <view v-for="(item, index) in allCities" :key="index">
          <view class="letter-class" :id="'id' + index">{{item.letter}}</view>
          <view v-for="(cityItem, index2) in item.cityList" :key="index2" class="item-class" @tap="citySelectEvent" :data-city="cityItem.name" :data-letter="cityItem.key">{{cityItem.name}}</view>
     </view>
</scroll-view>

<!-- <view class="citySlide" catchtouchstart="slideStart" catchtouchmove="slideMove" catchtouchend="slideEnd">
     <view v-for="(item, index) in allCities" :key="index" class="citySlideItem" :data-index="index">{{item.letter}}</view>
</view>

<text class="letterText" :hidden="isLetterHidden" :style="'top:' + letterTop + 'px;left:' + letterLeft + 'px'">{{letterText}}</text> -->
</view>
</template>

<script>
// components/selectCity/selectCity.js
var cities = require("../../common/city.js");
var letterLineHeight = 0;

export default {
  data() {
    return {
      // allCities: [],
      currentIndex: 'id0',
      letterText: '',
      isLetterHidden: true,
      letterTop: 0,
      letterLeft: 0
    };
  },

  components: {},
  props: {
    allCities: {
      type: Object,
      default: cities // observer: citiesObserver

    }
  },
  externalClasses: ['letter-class', 'item-class'],
  beforeMount: function () {
    var that = this;
    var cityArray = [];

    for (var key in cities.cities) {
      var cityObject = new Object();
      cityObject.letter = key;
      cityObject.cityList = cities.cities[key];
      cityArray.push(cityObject);
    }

    this.setData({
      allCities: cityArray
    });
    uni.getSystemInfo({
      success: function (res) {
        letterLineHeight = (res.windowHeight - 80) / that.allCities.length;
        that.setData({
          letterTop: res.windowHeight / 2 - 30,
          letterLeft: res.windowWidth / 2 - 30
        });
      }
    });
  },
  methods: {
    citySelectEvent: function (e) {
      var city = e.target.dataset.city;
      var letter = e.target.dataset.letter;
      var detail = {
        city: city,
        letter: letter
      };
      this.$emit('citySelect', {
        detail: detail
      });
    },
    citiesObserver: function (newVal, oldVal) {
      var detail = {
        newVal: newVal,
        oldVal: oldVal
      };
      this.$emit('citiesObserver', {
        detail: detail
      });
    },
    slideStart: function (e) {
      //手指触摸的y坐标值
      var touchY = e.touches[0].clientY; //布局距离屏幕顶端距离

      var offsetTop = e.currentTarget.offsetTop;
      var index = parseInt((touchY - offsetTop) / letterLineHeight);
      this.setData({
        currentIndex: 'id' + index,
        isLetterHidden: false,
        letterText: this.allCities[index].letter
      });
    },
    slideMove: function (e) {
      //手指触摸的y坐标值
      var touchY = e.touches[0].clientY; //布局距离屏幕顶端距离

      var offsetTop = e.currentTarget.offsetTop;
      var index = parseInt((touchY - offsetTop) / letterLineHeight);
      this.setData({
        currentIndex: 'id' + index,
        isLetterHidden: false,
        letterText: this.allCities[index].letter
      });
    },
    slideEnd: function (e) {
      var that = this;

      wx: setTimeout(function () {
        that.setData({
          isLetterHidden: true
        });
      }, 200);
    }
  }
};
</script>
<style>
/* components/selectCity/selectCity.wxss */

.cityList {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
}

.citySlide {
     display: flex;
     flex-direction: column;
     width: 60rpx;
     height: calc(100% - 80px);
     position: absolute;
     top: 40px;
     right: 16rpx;
     align-items: center;
     justify-content: center;
     background-color: #ccc;
     opacity: 0.6;
}

.citySlideItem {
     width: 100%;
     /* padding-top: 5rpx;
     padding-bottom: 5rpx; */
     flex: 1;
     text-align: center;
     font-size: 24rpx;
}

/* .cityListLetter {
     width: 100%;
     padding: 16rpx 24rpx 16rpx;
     font-size: 26rpx;
     background-color: skyblue;
}

.cityListItem {
     width: 100%;
     padding: 36rpx 24rpx;
     font-size: 26rpx;
     background-color: white;
     border-bottom: gray 1rpx solid;
} */

.letterText {
     position: absolute;
     width: 80px;
     height: 80px;
     line-height: 80px;
     text-align: center;
     font-size: 30rpx;
     color: white;
     border-radius: 12rpx;
     background-color: #bbb;
     opacity: 0.8;
}

</style>